const path = require('path')
, CleanWebpackPlugin = require('clean-webpack-plugin')
, HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    //target:['web','es5'], //webpack5配置
    entry:{
        main:'./src/main.js'
    },
    output:{
        filename:'[name][chunkhash:8].js',
        path:path.resolve(__dirname,'./dist'),
        // chunkFilename指的是那些动态导入的文件
        // import(/* webpackChunkName: "此次指定一下name" */)
        chunkFilename:'chunk.[name].[chunkhash:8].js',
        /** 
         * 此选项的值都会以 / 结束
         * output中的publicPath用于给生成的静态资源路径添加前缀
         * 也就是项目的子路径(上下文路径)
         * */
        publicPath:'/',  
    },
    //loader规则
    module: {
        rules: [
            {
				test:/\.js$/,
				use:[{
                    loader:'babel-loader',
                    //采用babel.config.js配置文件形式
                    // options:{
                    //     presets: ['@babel/preset-env']
                    // },
                    exclude:/node_modules/
				}]
			},
            //vue-loader解析.vue文件
            {  test: /\.vue$/,  loader: 'vue-loader'},
            {
                test: /\.css/,
                use: ['style-loader', 'css-loader'],
                exclude: /node_modules/
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(['dist']),
		new VueLoaderPlugin()
    ],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src")
        },
        extensions: [".js", ".json", ".vue", ".css"]
    }
}